<title>瀑布流</title>

<link rel="stylesheet" href="/css/examples/components/advanced/masonry.css">

<div class="page animation-fade">
    <div class="page-content padding-30 blue-grey-500">
        <ul class="blocks blocks-100 blocks-xlg-4 blocks-md-3 blocks-sm-2" data-plugin="masonry">
            <li class="masonry-item">
                <div class="widget widget-article widget-shadow">
                    <div class="widget-header cover">
                        <img class="cover-image" src="http://ifanr-cdn.b0.upaiyun.com/wp-content/uploads/2016/02/applepaydone.jpg" alt="...">
                    </div>
                    <div class="widget-body">
                        <h3 class="widget-title">Apple Pay 即将进入日本，这次索尼帮了大忙</h3>
                        <p class="widget-metas type-link">
                            文 /
                            <a href="javascript:;">宋业磊</a>
                            <a href="javascript:;">42分钟前</a>
                            <a href="javascript:;">
                                <span>3</span> 条评论
                            </a>
                        </p>
                        <p>不知道你怎么看 Apple Pay，但在不少人眼中，Apple Pay 的确是一个好用的工具。至少在麦当劳能快速买单。</p>
                        <div class="widget-body-footer">
                            <div class="widget-actions pull-right">
                                <a href="javascript:;"><i class="icon wb-heart" aria-hidden="true"></i> <span>108</span>
                                </a>
                            </div>
                            <button type="button" class="btn btn-outline btn-primary">阅读全文</button>
                        </div>
                    </div>
                </div>
            </li>
            <li class="masonry-item">
                <div class="widget widget-article widget-shadow">
                    <div class="widget-header cover">
                        <img class="cover-image" src="http://ifanr-cdn.b0.upaiyun.com/wp-content/uploads/2016/09/canon-ae1_11.jpg" alt="...">
                    </div>
                    <div class="widget-body">
                        <h3 class="widget-title">佳能泄露了一张新草图，让期待 EOS M 新机的人都扶了下眼镜</h3>
                        <p class="widget-metas type-link">
                            文 /
                            <a href="javascript:;">于恋洋</a>
                            <a href="javascript:;">12分钟之前</a>
                            <a href="javascript:;">
                                <span>2</span> 条评论
                            </a>
                        </p>
                        <p>自 2015 年 2 月推出第三代机身 EOS M3 之后，佳能的 EOS M 系列就沒有了消息，即便是镜头也只是断断续续更新了几款。</p>
                        <div class="widget-body-footer">
                            <div class="widget-actions pull-right">
                                <a href="javascript:;"><i class="icon wb-heart" aria-hidden="true"></i> <span>120</span>
                                </a>
                            </div>
                            <button type="button" class="btn btn-outline btn-primary">阅读全文</button>
                        </div>
                    </div>
                </div>
            </li>
            <li class="masonry-item">
                <div class="widget widget-article widget-shadow">
                    <div class="widget-header cover">
                        <div class="cover-background padding-30" style="background-image: url('http://ifanr-cdn.b0.upaiyun.com/wp-content/uploads/2016/05/2-13.jpg')">
                            <blockquote class="cover-quote white">路透社说中国社交平台上并没太多人讨论 iPhone 7</blockquote>
                        </div>
                    </div>
                    <div class="widget-body">
                        <p class="widget-metas type-link margin-bottom-0">
                            文 /
                            <a href="javascript:;">路透社</a>
                            <a href="javascript:;">刚刚</a>
                            <a href="javascript:;">
                                <span>5</span> 条评论
                            </a>
                        </p>
                    </div>
                </div>
            </li>
            <li class="masonry-item">
                <div class="widget widget-article widget-shadow">
                    <div class="widget-header cover">
                        <img class="cover-image" src="http://ifanr-cdn.b0.upaiyun.com/wp-content/uploads/2016/09/mz-newsroom-01-1200x800-21-1200x800.jpg" alt="...">
                    </div>
                    <div class="widget-body">
                        <h3 class="widget-title">争议与进步同行，Facebook News Feed 如何改变世界</h3>
                        <p class="widget-metas type-link">
                            文 /
                            <a href="javascript:;">刘慧姝</a>
                            <a href="javascript:;">10小时前</a>
                            <a href="javascript:;">
                                <span>2</span> 条评论
                            </a>
                        </p>
                        <p>这个一个巨大改变。10 年前，个性化信息推荐是从未存在过的，这一功能不仅改变了人们对 Facebook 的传统印象，同时也改变了互联网。</p>
                        <div class="widget-body-footer">
                            <div class="widget-actions pull-right">
                                <a href="javascript:;"><i class="icon wb-heart" aria-hidden="true"></i> <span>130</span>
                                </a>
                            </div>
                            <button type="button" class="btn btn-outline btn-primary">阅读全文</button>
                        </div>
                    </div>
                </div>
            </li>
            <li class="masonry-item">
                <div class="widget widget-article widget-shadow">
                    <div class="widget-header cover">
                        <img class="cover-image" src="http://images.ifanr.cn/wp-content/uploads/2015/06/VAIO-Z-Canvas-logo-1200750.jpg" alt="...">
                    </div>
                    <div class="widget-body">
                        <h3 class="widget-title">【ComputeX 15】VAIO Z Canvas 上手</h3>
                        <p class="widget-metas type-link">
                            文 /
                            <a href="javascript:;">徐宁</a>
                            <a href="javascript:;">2016年9月10日</a>
                            <a href="javascript:;"><span>2</span> 条评论</a>
                        </p>
                        <p>没有 Sony 标志却还是那个熟悉的味道</p>
                        <div class="widget-body-footer">
                            <div class="widget-actions pull-right">
                                <a href="javascript:;"><i class="icon wb-heart" aria-hidden="true"></i> <span>120</span>
                                </a>
                            </div>
                            <button type="button" class="btn btn-outline btn-primary">阅读全文</button>
                        </div>
                    </div>
                </div>
            </li>
            <li class="masonry-item">
                <div class="widget widget-article widget-shadow">
                    <div class="widget-header cover">
                        <img class="cover-image" src="http://ifanr-cdn.b0.upaiyun.com/wp-content/uploads/2015/07/ps4.jpg" alt="...">
                    </div>
                    <div class="widget-body">
                        <h3 class="widget-title">别光盯着苹果，明天索尼也要搞个大新闻</h3>
                        <p class="widget-metas type-link">
                            文 /
                            <a href="javascript:;">闫浩</a>
                            <a href="javascript:;">半小时前</a>
                            <a href="javascript:;">
                                <span>2</span> 条评论
                            </a>
                        </p>
                        <p>索尼之前官方确认将会在本周晚些时候公布新的 PS4 主机，而现在索尼韩国官网的公告显示，索尼亚洲将会在 9 月 8 日中午 11 点于香港公布新主机的售价和发售日期。</p>
                        <div class="widget-body-footer">
                            <div class="widget-actions pull-right">
                                <a href="javascript:;"><i class="icon wb-heart" aria-hidden="true"></i> <span>120</span>
                                </a>
                            </div>
                            <button type="button" class="btn btn-outline btn-primary">阅读全文</button>
                        </div>
                    </div>
                </div>
            </li>
            <li class="masonry-item">
                <div class="widget widget-article widget-shadow">
                    <div class="widget-header cover">
                        <div class="cover-background padding-30" style="background-image: url('http://ifanr-cdn.b0.upaiyun.com/wp-content/uploads/2016/09/japan-traffic-1.jpg')">
                            <blockquote class="cover-quote white">这个一个巨大改变。</blockquote>
                        </div>
                    </div>
                    <div class="widget-body">
                        <p class="widget-metas type-link margin-bottom-0">
                            文 /
                            <a href="javascript:;">网友</a>
                            <a href="javascript:;">2016年1月1日</a>
                            <a href="javascript:;"><span>2</span> 条评论</a>
                        </p>
                    </div>
                </div>
            </li>
            <li class="masonry-item">
                <div class="widget widget-article widget-shadow">
                    <div class="widget-header cover">
                        <img class="cover-image" src="http://ifanr-cdn.b0.upaiyun.com/wp-content/uploads/2016/09/WechatIMG197.jpeg" alt="...">
                    </div>
                    <div class="widget-body">
                        <h3 class="widget-title">Nike“试衣间”也用 VR ，消费体验会因此升级吗？</h3>
                        <p class="widget-metas type-link">
                            文 /
                            <a href="javascript:;">杜暮雨</a>
                            <a href="javascript:;">2天前</a>
                            <a href="javascript:;">
                                <span>8</span> 条评论
                            </a>
                        </p>
                        <p>今天上午，Nike 在上海发布了2016 Nike Sportswear Tech Pack 男女款秋季系列。与以往不同的是，为了让消费者对产品有更深入的了解，Nike
                            在上海淮海品牌体验店设置了 VR 体验区。</p>
                        <div class="widget-body-footer">
                            <div class="widget-actions pull-right">
                                <a href="javascript:;"><i class="icon wb-heart" aria-hidden="true"></i> <span>120</span>
                                </a>
                            </div>
                            <button type="button" class="btn btn-outline btn-primary">阅读全文</button>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</div>

<script src="/vendor/masonry/masonry.pkgd.min.js"></script>
